<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<script lang="ts" setup>
import {
  Download,
  Plus,
  Search,
  Upload,
} from '@element-plus/icons-vue'
import { debounce } from 'lodash'
import { onMounted, ref, watch } from 'vue'
import service from '~/composables/request'

const currentPage = ref(1)
const pageSize = ref(100)
const total = ref(0)
const tableData = ref([])
const path = ref('')
const name = ref('')

const page = ref({
  dialogTableVisible: false,
  dialogFormVisible: false,
})

// GET 请求函数
async function loaddata() {
  const dd = await service.get('files', {
    params: {
      path: path.value,
      name: name.value,
      pageSize: pageSize.value,
      pageNum: currentPage.value,
    },
  })
  tableData.value = dd.records
  total.value = dd.total
  currentPage.value = dd.current
}

// 页面加载时执行
onMounted(loaddata)
watch(path, debounce(loaddata, 170))
watch(currentPage, loaddata)

// const tableData = ref([
//   {
//     image: 'https://ai-public.mastergo.com/ai/img_res/22f22a530576e2ceaf9c0045f5ce2b30.jpg',
//     name: '智能手表 Pro',
//     spec: '黑色',
//     unit: '个',
//     costPrice: '￥399',
//     purchasePrice: '￥429',
//     retailPrice: '￥599',
//     wholesalePrice: '￥499',
//     stock: 128,
//   },
//   {
//     image: 'https://ai-public.mastergo.com/ai/img_res/6d0045b7ba04544cacc46a3f7489d5e7.jpg',
//     name: '无线耳机',
//     spec: '白色',
//     unit: '个',
//     costPrice: '￥199',
//     purchasePrice: '￥229',
//     retailPrice: '￥299',
//     wholesalePrice: '￥259',
//     stock: 256,
//   },
// ])

function handleEdit(index: number, row: any) {
  console.log(index, row)
  console.log(row.id)
  // 构建包含id的URL（根据实际需求调整路径）
  const url = `/api/files/${row.id}/view` // 例如: /edit/123
  window.open(url, '_blank')
  // 方式1: 在当前窗口跳转
  // window.location.href = url;
}

function handleDelete(index: number, row: any) {
  console.log(index, row)
}
</script>

<template>
  <div>
    <div>
      <el-card class="!rounded-lg">
        <div class="mb-6 flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <el-input
              v-model="path"
              placeholder="请输入商品名称、首字母、货号"
              :prefix-icon="Search"
            />
            <el-input
              v-model="name"
              placeholder="请输入商品名称、首字母、货号"
              :prefix-icon="Search"
            />

            <!--              <Idtable :myData="tableData" /> -->
<!--            <el-button class="!rounded-button">-->
<!--              全部类别-->
<!--            </el-button>-->
            <el-button type="warning" @click="page.dialogTableVisible = true">
              <el-icon class="mr-2">
                <Plus />
              </el-icon>
              创建新商品
            </el-button>
<!--            <el-button type="primary">-->
<!--              <el-icon class="mr-2">-->
<!--                <Upload />-->
<!--              </el-icon>-->
<!--              导入商品-->
<!--            </el-button>-->
<!--            <el-button type="primary">-->
<!--              <el-icon class="mr-2">-->
<!--                <Download />-->
<!--              </el-icon>-->
<!--              导出商品-->
<!--            </el-button>-->
          </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="40" />
          <el-table-column label="序号" type="index" width="60" />
          <el-table-column label="图片" align="center" width="270">
            <template #default="scope">
              <!-- 容器控制布局，防止图片溢出 -->
              <div class="image-container" style="max-width: 100%; overflow-x: auto; padding: 4px 0;">
                <!-- 循环渲染图片，每个固定60x60 -->
                <el-image
                  v-for="(imgUrl, index) in scope.row.thumbnail.split(',') "
                  v-if="scope.row.thumbnail"
                  :key="index"
                  class="h-[60px] w-[60px] object-cover !rounded"
                  :src="`/static/${imgUrl}`"
                  :preview-src-list="tableData.map(item => `/api/files/${item.id}/view`)"
                  preview-teleported="true"
                  style="display: inline-block; margin-right: 8px;"
                  fit="cover"
                />
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="name" label="商品名称" width="180" />
          <el-table-column prop="path" label="路径" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="primary" link @click="handleEdit(scope.$index, scope.row)">
                查看
              </el-button>
              <el-button type="danger" link @click="handleDelete(scope.$index, scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mt-6 flex items-center justify-between">
          <div class="text-sm text-gray-500">
            共 {{ total }} 条记录
          </div>
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total"
            class="mt-4"
          />
        </div>
      </el-card>
    </div>
  </div>
  <el-dialog v-model="page.dialogTableVisible" v-loading title="收货地址">
    <el-form>
      <el-form-item label="活动名称">
        <el-input autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="page.dialogTableVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="sd">
          确 定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-aside {
  width: 200px;
}



</style>
